<template>
	<view>
		<view class="date-area" v-for="(it,index) in lastWeekWorkingHours" :key="index"
			:class="it.isClick?'bg1':''" @click="itemClick(it)">
			<image class="left-icon" v-if="it.alearyFillButUnStatic==='no'" src="/static/graph/unFinished.png" alt="">
			<image class="left-icon" v-else src="/static/graph/finished.png" alt="">
			<text class="date">{{it.nowDate}}</text>
			<text class="week">{{it.nowWeek}}</text>
		</view>
		
		<input class="uni-input ipt-outline ipt-padding ipt-box" type="text" 
			placeholder="请输入项目名称" v-model="iptVal" @input="inputData"/>
	</view>
</template>

<script>
	export default {
		name: 'realTimeInput',
		props:{
			lastWeekWorkingHours:{
				type: Array,
				default: () => []
			},
			timeoutDelay:{
				type:Number,
				default:1000,
				required:false
			}
		},
		data(){
			return {
				iptVal:'',
				t1:'',
			}
		},
		methods:{
			itemClick(it){
				this.iptVal = ''
				this.$emit('itemClick',it)
			},
			inputData(e){
				// 更新数据
				// 这里面只有e.targe.value是最新的，this.iptVal不是
				// this.$emit('input',e.target.value)
				// 防抖
				clearTimeout(this.t1)
				this.t1=setTimeout(()=>{
					this.$emit('inputDataChangeHandler',e.target.value)
				},this.timeoutDelay)
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .flex-date-center{
	// 	width: 100vw;
	// 	height: 120upx;
	// 	display: flex;
	// 	align-items: center;
	// }
	.date-area {
	  display: flex;
	  align-items: center;
	  flex-direction: column;
	  justify-content: center;
	  width: 120upx;
	  height: 100upx;
	  margin-left: 20upx;
	  cursor: pointer;
	  position: relative;
	  background: #EEEEEE;
	  color: #000000;
	  float: left;
	  margin-bottom: 20upx;
	  border-radius: 10upx;
	  .date {
	    font-size: 28upx;
	  }
	  .week {
	    font-size: 24upx;
	  }
	  .left-icon {
	    width: 40upx;
	    height: 40upx;
	    position: absolute;
	    top: -16upx;
	    left: -16upx;
	  }
	}
	.bg1 {
	  background: #14e6b4;
	}
	.ipt-{
		&outline{
		outline: 4rpx solid rgb(232, 232, 232);
		}
		&padding{
		padding:5rpx 40rpx;
		}
		&box{
			width:97vw;
			border-radius: 20rpx;
			height:60rpx;
			margin-left: 10rpx;
			margin-bottom: 20rpx;
		}
	}
	
</style>